<template>
  <div class="mission-wrap">
    <div class="mission-list">
      <div class="mission-list-wrap">
        <div class="none-box" v-if="missionList.length == 0">
          {{ $t('暂无数据') }}
        </div>
        <missionItem
          v-for="(item, index) in missionList"
          :key="index"
          :missionObj="item"
        ></missionItem>
      </div>
      <div class="pagination-box">
        <el-pagination
          background
          :current-page="page.pageNo"
        :page-sizes="[12, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <div class="misson-top">
      <div class="mission-recommend" style="margin-bottom: 0.89rem">
        <div class="title">
          <img src="../../assets/img/title.png" alt="" />
          <p>{{ $t('推荐任务') }}</p>
        </div>
        <div class="none-box" v-if="missionListTop2.length == 0">
          {{ $t('暂无数据') }}
        </div>
        <div
          class="mission-list-item"
          v-for="(item, index) in missionListTop2"
          :key="index"
        >
          <div class="number">
            <img src="../../assets/img/no1.png" alt="" v-if="index == 0" />
            <img src="../../assets/img/no2.png" alt="" v-else-if="index == 1" />
            <img src="../../assets/img/no3.png" alt="" v-else-if="index == 2" />
            <p v-else>{{ index + 1 }}</p>
          </div>
          <p class="summary" @click="goDetail(item)">{{ item.title }}</p>
          <p class="price">¥{{ item.reward / 100 }}</p>
        </div>
      </div>
      <div class="mission-recommend">
        <div class="title">
          <img src="../../assets/img/title.png" alt="" />
          <p>{{ $t('热门任务') }}</p>
        </div>
        <div class="none-box" v-if="missionListTop1.length == 0">
          {{ $t('暂无数据') }}
        </div>
        <div
          class="mission-list-item"
          v-for="(item, index) in missionListTop1"
          :key="index"
        >
          <div class="number">
            <img src="../../assets/img/no1.png" alt="" v-if="index == 0" />
            <img src="../../assets/img/no2.png" alt="" v-else-if="index == 1" />
            <img src="../../assets/img/no3.png" alt="" v-else-if="index == 2" />
            <p v-else>{{ index + 1 }}</p>
          </div>
          <p class="summary" @click="goDetail(item)">{{ item.title }}</p>
          <p class="price">¥{{ item.reward / 100 }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api/mission.js'
import missionItem from './component/missionItem.vue'
export default {
  data() {
    return {
      missionList: [],
      missionListTop1: [],
      missionListTop2: [],
      page: {
        pageNo: 1,
        pageSize: 12,
        total: 0,
      },
    }
  },
  components: {
    missionItem,
  },
  mounted() {
    this.initData()
    this.initDataTop2()
    this.initDataTop1()
  },
  methods: {
    async initData() {
      let res = await this.$http.get(api.getList, {
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          status: 2,
          orderBy: 'urgent',
        },
      })
      if (res && res.code == 0) {
        this.missionList = res.data.list
        this.page.total = res.data.total
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
    async initDataTop1() {
      // 热门任务
      let res = await this.$http.get(api.getList, {
        myloading: false,
        params: {
          pageNo: 1,
          pageSize: 10,
          status: 2,
          orderBy: 'schemeNum',
        },
      })
      if (res && res.code == 0) {
        this.missionListTop1 = res.data.list
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
    async initDataTop2() {
      // 推荐任务
      let res = await this.$http.get(api.getList, {
        myloading: false,
        params: {
          pageNo: 1,
          pageSize: 10,
          status: 2,
          orderBy: 'reward',
        },
      })
      if (res && res.code == 0) {
        this.missionListTop2 = res.data.list
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.pageNo = 1
      this.initData()
    },
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.initData()
    },
    goDetail(item) {
      // if (window.getSelection().toString().length > 0) return
      this.$router.push({ name: 'MissionDetail', query: { id: item.id } })
    },
  },
}
</script>
<style lang="scss" scoped>
.mission-wrap {
  margin-left: 7.78rem;
  margin-top: 3.72rem;
  margin-bottom: 5.56rem;
  display: flex;
  align-items: flex-start;
  .mission-list {
    background: #f5f7fa;
    width: 42.47rem;
    border-radius: 0.44rem;
    padding: 0.89rem 0 0 0.89rem;
    margin-right: 0.89rem;
    .mission-list-wrap {
      display: flex;
      flex-wrap: wrap;
    }
    .mission-item {
      width: 13.22rem;
      border: 0.06rem solid #dcdfe6;
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
      border-radius: 0.3rem;
      overflow: hidden;

      img {
        height: 6.14rem;
        width: 100%;
        border-radius: 0.3rem;
      }
      .info-box {
        padding: 0 0.44rem;
        display: flex;
        justify-content: space-between;
      }
      .price {
        margin-bottom: 0.39rem;
        span:nth-child(1) {
          color: #f85c02;
          font-size: 0.89rem;
          font-weight: bold;
          line-height: 1.22rem;
          letter-spacing: 1px;
        }
        span:nth-child(2) {
          font-size: 0.67rem;
          background: #f85c02;
          line-height: 1.22rem;
          color: #fff;
          padding: 0 0.22rem;
        }
      }
      .title {
        font-weight: bold;
        font-size: 0.78rem;
        color: #333333;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        cursor: pointer;
      }
      .summary {
        font-weight: 400;
        font-size: 0.78rem;
        color: #999999;
        line-height: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0.22rem 0 0.89rem 0;
        height: 2rem;
      }
      .tag {
        margin-bottom: 0.83rem;
        span {
          line-height: 1.11rem;
          font-size: 0.67rem;
          color: #339eff;
          border: 0.06rem solid #339eff;
          padding: 0 0.22rem;
          margin-right: 0.22rem;
        }
      }
      .address {
        i {
          color: #4d4d4d;
          font-size: 0.78rem;
          margin-right: 0.22rem;
        }
        span {
          color: #333333;
          font-size: 0.78rem;
        }
      }
    }
    .pagination-box {
      text-align: center;
    }
  }
  .misson-top {
    .mission-recommend {
      background: #f5f7fa;
      border-radius: 0.44rem;
      width: 21rem;
      padding: 0.89rem 1.17rem 0.89rem 0.89rem;

      .title {
        font-weight: bold;
        font-size: 1.33rem;
        color: #333333;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.94rem;
        img {
          width: 1.6rem;
          height: 1.12rem;
          margin-right: 0.44rem;
        }
      }
      .mission-list-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.89rem;
        .number {
          background: rgba(210, 229, 246, 0.4);
          width: 1.78rem;
          height: 1.78rem;
          border-radius: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          p {
            font-size: 0.78rem;
            color: #425f9b;
            font-weight: bold;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .summary {
          flex: 1;
          font-size: 0.89rem;
          color: #333333;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin: 0 1.33rem 0 0.56rem;
          cursor: pointer;
        }
        .price {
          font-size: 0.89rem;
          color: #f85c02;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.mission-wrap {
  .el-pagination.is-background .el-pager li {
    border-radius: 0.2rem;
    border: 0.06rem solid #d9dbe2;
    background: #ffffff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    border: 0.06rem solid #146eb4;
    color: #146eb4;
    background: #ffffff;
  }
}
</style>
